import React from 'react'
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils';
import flexStyle from '../../../../configs/flex';
import Icon from '../../../public/icon';
import skin from '../../../../configs/skin';
// import PropTypes from 'prop-types'
import fontsize from '../../../../configs/fontsize';

export default class BusDetail extends React.Component {
  // static propTypes={
  //   businfo: {
  //     startstaion: PropTypes.string, endstation: PropTypes.string, starttime: PropTypes.string, endtime: PropTypes.string, linename: PropTypes.string, stations: PropTypes.array
  //   }
  // }
  constructor(props) {
    super(props)
    this.state = {
      showAll: false // 展示全部站点
    }
  }
  // 将06:00:00格式化为06:00
  formatTime(time = '') {
    if (time.length > 5) return time.substring(0, time.lastIndexOf(':'))
    else return time
  }
  render() {
    let hideStations = []
    this.props.businfo.stations.forEach((ele, index)=>{
      if (index !== 0 && index !== this.props.businfo.stations.length - 1) {
        hideStations.push(<View key={index + 'hidestations'} style={{ position: 'relative', marginTop: px2dp(20) }}>
          <View style={[styles.smallCircle, skin.baseBgColorNoActive]}></View>
          <Text style={fontsize.fontsize24}>{ele.STATION_NAME}</Text>
        </View>)
      }
    })
    return (
      <View style={[styles.wrapper, flexStyle.flexH]}>
        <Icon name={'bus'} size={26}
          style={styles.topMargin}></Icon>
        <View style={[flexStyle.flexH]}>
          <View style={[flexStyle.flexV]}>
            <Icon name={'shang'} size={30}></Icon>
            <View style={[styles.connectLine, skin.baseBgColorNoActive, { height: this.state.showAll ? px2dp(142) + px2dp(53) * (this.props.businfo.stations.length - 2) : px2dp(142)
            }]}></View>
            <Icon name={'xia'} size={30}></Icon>
          </View>
          <View style={[flexStyle.flexV, { marginLeft: px2dp(32) }]}>
            <Text style={[fontsize.fontsize28, { fontWeight: 'bold' }]}>{this.props.businfo.startstaion}</Text>
            <Text style={[fontsize.fontsize24, skin.baseColorNoAcitve, { marginTop: px2dp(32) }]}>{this.props.businfo.linename}公交车</Text>
            {this.props.businfo.starttime || this.props.businfo.endtime
              ? <View style={[styles.timeBox, flexStyle.flexH]}>
                {this.props.businfo.starttime ? <Text style={fontsize.fontsize20}>首&nbsp;{this.formatTime(this.props.businfo.starttime)}&nbsp;</Text> : null}
                {this.props.businfo.endtime ? <Text style={fontsize.fontsize20}>末&nbsp;{this.formatTime(this.props.businfo.endtime)}</Text> : null}
              </View> : null}
            {this.state.showAll ? hideStations : null}
            <Text numberOfLines={1} style={[fontsize.fontsize28, styles.endStationBottom, { fontWeight: 'bold' }]}>{this.props.businfo.endstation}</Text>
          </View>
        </View>
        <TouchableOpacity style={[styles.topMargin, flexStyle.flexH, flexStyle.flexVc, styles.expandRight, { maxHeight: px2dp(34) }]} onPress={()=>{
          this.setState({ showAll: !this.state.showAll })
        }}>
          <Text>{this.props.businfo.stations.length - 1}站</Text>
          <Icon name={this.state.showAll ? 'topangel' : 'downangel'} size={24}
            color={'#999999'}></Icon>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    width: px2dp(750),
    backgroundColor: '#F1FAFF',
    paddingVertical: px2dp(16),
    paddingHorizontal: px2dp(30),
    minHeight: px2dp(240),
    position: 'relative'
  },
  topMargin: {
    marginTop: px2dp(95)
  },
  connectLine: {
    width: px2dp(4),
    minHeight: px2dp(142),
    marginLeft: px2dp(13)
  },
  endStationBottom: {
    position: 'absolute',
    bottom: 0
  },
  expandRight: {
    position: 'absolute',
    right: px2dp(30)
  },
  timeBox: {
    paddingHorizontal: px2dp(15),
    borderColor: '#AAAAAA',
    borderWidth: px2dp(1)
  },
  smallCircle: {
    height: px2dp(19),
    width: px2dp(19),
    borderRadius: px2dp(9.5),
    position: 'absolute',
    left: -px2dp(57),
    top: px2dp(2)
  }
})